<template>
  <div id="app">
    <div class="bannel-title">
      <h1>深蓝守护者驾驶舱</h1>
    </div>
    <LayoutBg></LayoutBg>

      <div class="check-group">
        <button class="check-class" @click="real">实时报警</button>
        <button class="check-class" @click="check">智能巡航</button>
        <button class="check-class" @click="clearAlarm">清除轨迹</button>
      </div>
      <monitor-data-pannel title="实时水质"></monitor-data-pannel>
      <monitor-chat-pannel title="水质变化"></monitor-chat-pannel>
      <ai-video-pannel title="AI视频"></ai-video-pannel>
      <ai-assistant-pannel title="智能助手"></ai-assistant-pannel>

      <div id="map" class="container"></div>
      <audio id="audio" :src="require('@/assets/alarm.wav')" loop></audio>
      <el-image class="person" :src="require('@/assets/小碧@4x.png')"></el-image>
  </div>
</template>

<script>
import "maptalks/dist/maptalks.css";
import * as maptalks from "maptalks";
import aiPoints from "@/assets/data.json";
import traceData from "@/assets/trace-data.json";
import PopWindow from "@/components/PopWindow.vue";
import PopWindow2 from "@/components/PopWindow2.vue";
import PopWindow3 from "@/components/PopWindow3.vue";
import PopWindow4 from "@/components/PopWindow4.vue";
import PopWindow5 from "@/components/PopWindow5.vue";
import Vue from "vue";
import LayoutBg from "@/layout-bg/index.vue";
import MonitorDataPannel from "@/components/MonitorDataPannel.vue";
import AiVideoPannel from "@/components/AiVideoPannel.vue";
import AiAssistantPannel from "@/components/AiAssitantPannel.vue";
import MonitorChatPannel from "@/components/MonitorChatPannel.vue";

export default {
  name: "App",
  data() {
    return {
      total: 0,
      normal: 0,
      alarm: 0,
    };
  },
  components: {MonitorChatPannel, AiAssistantPannel, AiVideoPannel, MonitorDataPannel, LayoutBg},
  mounted() {
    this.createMap();
    this.initData();
  },
  methods: {
    createMap: function () {
      window.map = new maptalks.Map("map", {
        center: [ 120.14950835650973,  30.141780414982975],
        zoom: 14,
        minZoom: 1,
        maxZoom: 18,
        spatialReference: {
          projection: "EPSG:4326",
        },
        zoomControl: true, // add zoom control
        baseLayer: new maptalks.TileLayer("base", {
          tileSystem: [1, -1, -180, 90],
          urlTemplate:
            "https://t{s}.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=d5cbd0c27896bb8f535dc57ecef2718c",
          subdomains: ["1", "2", "3", "4", "5"],
        }),
        layers: [
          new maptalks.TileLayer("label", {
            tileSystem: [1, -1, -180, 90],
            urlTemplate:
              "https://t{s}.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=d5cbd0c27896bb8f535dc57ecef2718c",
            subdomains: ["1", "2", "3", "4", "5"],
          }),
        ],
      });
    },
    addPoint(index){
      let jk = aiPoints[index];
      let dom = document.createElement("div");
      if(jk.衣服ID == "AIJSY00001") {
        dom.innerHTML = `<img src="${require(`./assets/报警.svg`)}" style="width: 48px;height: 48px;">`;
      }else{
        dom.innerHTML = `<img src="${require(`./assets/报警-O.svg`)}" style="width: 48px;height: 48px;">`;
      }

      
      let marker = new maptalks.ui.UIMarker([jk.经度, jk.纬度], {
        content: dom,
      }).addTo(window.map);
      marker.properties = { ...jk };
      marker.on("click", (e) => {
        if (window.infoWindow) {
          window.infoWindow.remove();
        }

        let subPopup = Vue.extend(PopWindow);
        
        if(jk.衣服ID == "AIJSY00001") {
          subPopup = Vue.extend(PopWindow5)
        }
        if(jk.衣服ID == "AIJSY00005") {
          subPopup = Vue.extend(PopWindow2)
        }
        if(jk.衣服ID == "AIJSY00002") {
          subPopup = Vue.extend(PopWindow3)
        }
        let popContent = new subPopup({
          propsData: {
            properties: { ...jk },
          },
        });
        console.info(e);
        // marker.setInfoWindow({ content: popContent.$mount().$el });
        // marker.openInfoWindow();
        window.infoWindow = new maptalks.ui.InfoWindow({
          content: popContent.$mount().$el,
          autoOpenOn: false
        });
        window.infoWindow.addTo(window.map).show(marker._coordinate);
      });
      window.markers.push(marker);
    },
    initData: function () {
      window.markers = [];

      window.map.on('click', function (e) {
        // 获取点击的坐标
        const coordinates = e.coordinate;
        console.log('点击坐标:', coordinates);
      });

      
    },
    check() {
      this.alarm = 1;
      this.normal = this.total - this.alarm;
        // let audio = document.getElementById("audio");
        // audio.play();
      // window.markers.forEach((marker) => {
      //   if (marker.properties.衣服ID == "AIJSY00006") {
      //     marker.properties.当前状态 = "报警";
      //     marker.setContent(`<img src="${require(`./assets/报警.svg`)}">`);
      //   }
      //   if (marker.properties.衣服ID == "AIJSY00010") {
      //     marker.properties.当前状态 = "报警";
      //     marker.setContent(`<img src="${require(`./assets/报警-G.svg`)}">`);
      //   }
      // });

      let location = traceData[0]
      let dom = document.createElement("div");
      dom.innerHTML = `<img src="${require(`./assets/黄色船.png`)}" style="width: 48px;height: 48px;">`;
      window.boatMarker = new maptalks.ui.UIMarker([location.x, location.y], {
        content: dom,
      }).addTo(window.map);
      let count = 0;

      window.line = null;
      let self = this;
      let lineCoordinates = [];
    
      window.traceInterval = window.setInterval(function (){
        let dt = traceData[count]
        console.info(count,dt,traceData.length)

        if(count >= traceData.length){
          window.clearInterval(window.traceInterval);
          return
        }

        window.boatMarker.setCoordinates(dt)
        if(count == 3){self.addPoint(0)}
        if(count == 11){self.addPoint(1)}
        if(count == 19){self.addPoint(2)}
        if(count == 22){self.addPoint(3)}

        lineCoordinates.push(dt); // 将坐标添加到数组中

        // 如果这是第一次点击，创建LineString对象
        if (!window.line) {
          window.line = new maptalks.LineString(lineCoordinates, {
                'id': 'dynamicLine',
                smoothness : 0.5,
                'symbol': {
                    'lineColor': '#ff0000',
                    'lineWidth': 5,
                    'lineJoin'  : 'round', //miter, round, bevel
                    'lineCap'   : 'round', //butt, round, square
                }
            });

            let linelayer = window.map.getLayer('lineLayer');
            if(!linelayer){
              new maptalks.VectorLayer('lineLayer', window.line).addTo(window.map);
            }else{
              linelayer.addGeometry(window.line);
            }
            
        } else {
            // 更新LineString对象的坐标
            window.line.setCoordinates(lineCoordinates);
        }
        count ++
      },1000)
    },
      clearAlarm(){
          window.map.removeLayer('lineLayer');
          window.line = null;
          let audio = document.getElementById("audio");
          audio.pause();
          if(window.boatMarker){
            window.boatMarker.remove();
          }
          window.markers.forEach(marker=>{
            marker.remove();
          })
          window.markers = []
          if(window.alarmMarker){
          window.alarmMarker.remove()
        }
      },

      real(){
        // 水质报警点
        //120.1413115257602, y: 30.132982769414127
        if(window.alarmMarker){
          window.alarmMarker.remove()
        }
        let dom = document.createElement("div");
        dom.innerHTML = `<img src="${require(`./assets/报警.svg`)}" style="width: 48px;height: 48px;">`;
        window.alarmMarker = new maptalks.ui.UIMarker([120.1413115257602, 30.132982769414127], {
          content: dom,
        }).addTo(window.map);

        window.alarmMarker.on("click", (e) => {
          if (window.infoWindow) {
            window.infoWindow.remove();
          }

          let subPopup = Vue.extend(PopWindow4);
          let popContent = new subPopup({
            propsData: {
              properties: { "x": 120.14, "y": 30.13 },
            },
          });
          console.info(e);
          // marker.setInfoWindow({ content: popContent.$mount().$el });
          // marker.openInfoWindow();
          window.infoWindow = new maptalks.ui.InfoWindow({
            content: popContent.$mount().$el,
            autoOpenOn: false
          });
          window.infoWindow.addTo(window.map).show(window.alarmMarker._coordinate);
        });
      },
  },
};
</script>

<style>
@import "style/data-visual-common.css";
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
  width: 100%;
}

html,
body {
  margin: 0px;
  height: 100%;
  width: 100%;
}

.container {
  width: 100%;
  height: 100%;
}

.header {
  /* 总数统计 */
  z-index: 99;
  position: absolute;
  left: 0px;
  //top: 84px; width: 100%; height: 79px; opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0px 40px;

  background: radial-gradient(
      49% 55% at 50% 0%,
      rgba(0, 126, 255, 0.35) 0%,
      rgba(0, 126, 255, 0.095) 47%,
      rgba(0, 126, 255, 0) 84%
    ),
    radial-gradient(
      54% 50% at 50% 100%,
      rgba(0, 126, 255, 0.6) 0%,
      rgba(0, 48, 97, 0) 100%
    ),
    linear-gradient(
      90deg,
      rgba(0, 48, 97, 0) 0%,
      rgba(0, 31, 62, 0.95) 27%,
      rgba(0, 18, 36, 0.95) 50%,
      rgba(0, 31, 62, 0.95) 73%,
      rgba(0, 48, 97, 0) 99%
    );

  box-sizing: border-box;
  border-width: 1px 0px 1px 0px;
  border-style: solid;
  border-image: linear-gradient(
      270deg,
      rgba(52, 164, 255, 0) 0%,
      rgba(52, 164, 255, 0.6761) 32%,
      #34a4ff 48%,
      rgba(52, 164, 255, 0) 100%
    )
    1 0 1 0;
}

.maptalks-zoom {
  top: 200px;
  position: absolute;
}
.maptalks-msgContent {
  text-align: left;
}
.tile-block {
  padding-left: 0px;
  width: 80px;
}

.label {
  font-family: Source Han Serif CN;
  font-size: 18px;
  font-weight: bold;
  line-height: 18px;
  text-align: center;
  letter-spacing: 0px;

  color: #ffffff;
  list-style: none;
}

.number {
  font-family: Oswald;
  font-size: 28px;
  font-weight: normal;
  line-height: normal;
  letter-spacing: 0px;
  text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
  list-style: none;
}

.tk-button {
  right: 10px;
  bottom: 10px;
}
.check-group{
    position: absolute;
    right: 10px;
    bottom: 20px;
    z-index: 999;
}
.check-class {
  width: 80px;
  margin-left: 5px;
}

.bannel-title {
  font-family: PangMenZhengDao;
  font-size: 24px;
  font-weight: normal;
  line-height: 12px;
  text-align: center;
  letter-spacing: 0em;
  color: #fff;
  opacity: 1;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
  position: absolute;
  left: calc(50% - 200px);
  z-index: 10;
}

.person {
  width: 200px;
  height: 200px;
  top: 320px;
  right: 90px;
  z-index: 99;
  position: absolute !important;
}
</style>
